<template>
	<!--使用uniapp扩展组件的datetime-picker-->
	<view :class="$isPc ? 'pc-datetime-picker' : ''">
		<u-datetime-picker
			v-model="options.value"
			:show="options.isShow"
			:mode="options.mode"
			:showToolbar="options.showToolbar"
			:title="options.title"
			:maxDate="options.maxDate"
			:minDate="options.minDate"
			:minHour="options.minHour"
			:maxHour="options.maxHour"
			:filter="options.filter"
			:formatter="options.formatter"
			:loading="options.loading"
			:itemHeight="options.itemHeight"
			:cancelText="options.cancelText"
			:confirmText="options.confirmText"
			:cancelColor="options.cancelColor"
			:confirmColor="options.confirmColor"
			:visibleItemCount="options.visibleItemCount"
			:closeOnClickOverlay="options.closeOnClickOverlay"
			:defaultIndex="options.defaultIndex"
			@close="_close"
			@confirm="_confirm"
			@change="_change"
			@cancel="_cancel"
		></u-datetime-picker>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		name:"c-base-datetimePicker",
		data() {
			return {
				options: {},
				defaultOptions: {
					paramName: "",
					isShow: false,
					value: Number(new Date()),
					mode: "datetime",
					showToolbar: true,
					title: "请选择",
					maxDate: (() => {
						let afterYear = moment().add(10, "year").valueOf()
						return afterYear
					})(),
					minDate: (() => {
						let beforeYear = moment().subtract(10, "year").valueOf()
						return beforeYear
					})(),
					minHour: 0, // 仅mode=time有效
					maxHour: 23, // 仅mode=time有效
					minMinute: 0, // 仅mode=time有效
					maxMinute: 59, // 仅mode=time有效
					filter: null,
					formatter: null,
					loading: false,
					itemHeight: 44,
					cancelText: "取消",
					confirmText: "确认",
					cancelColor: "#909193",
					confirmColor: "#3c9cff",
					visibleItemCount: 5,
					closeOnClickOverlay: false,
					defaultIndex: []
				}
			}
		},
		methods: {
			open(options) {
				console.error(options)
				this.options = JSON.parse(JSON.stringify(this.defaultOptions))
				if (options) {
					for (let i in this.options) {
						this.options[i] = options[i] || this.options[i]
						if (i == "showToolbar") {
							this.options[i] = options[i] !== false ? true : false
						}
						if (i == "loading" || i == "closeOnClickOverlay") {
							this.options[i] = options[i] || false
						}
					}
				}
				this.options.isShow = true
				this._hideKeyboard()
			},
			_close() {
				this.options.isShow = false
			},
			_confirm(item) {
				console.error(item)
				item.paramName = this.options.paramName
				this.$emit("selected", item)
				this._close()
			},
			_change(val) {
				console.error(val)
			},
			_cancel() {
				this._close()
			},
			_hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style scoped lang="scss">
	.pc-datetime-picker {
		/deep/ .u-popup__content {
			width: 320px;
			left: calc(50% - 160px);
			bottom: calc(50vh - 105px);
		}
	}
</style>
